﻿<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>KM 影响店铺销售经营关键因素调研结果</title>
    <meta charset="utf-8" />
    <link href="../../css/bootstrap.min.css" rel="stylesheet" />
    <link href="../../css/font-awesome.min.css" rel="stylesheet" />
    <link href="../../js/plugins/layer/skin/layer.css" rel="stylesheet" />
    <script src="../../js/jquery-2.1.1.min.js"></script>
    <script src="../../js/bootstrap.min.js"></script>
    <script src="../../js/plugins/layer/layer.min.js"></script>
    <script src="../../js/echarts.js"></script>
    <style>
        label {
            font-size: 28px;
        }
    </style>
</head>
<body>
    <div class="container">
        <div class="row clearfix">

            <div class="">
                <div class="font-color-default">
                    <label>KM店铺调研结果</label>

                    <!--<div class="btn btn-primary col-md-10 col-lg-10  col-xs-10 col-sm-10 col-lg-offset-3">加载问卷调查数据</div>-->

                    <div id="chart_a" style="width: 1000px; height: 500px;"></div>
                    <div id="chart_b" style="width: 1000px; height: 500px;"></div>
                    <div id="chart_c" style="width: 1000px; height: 500px;"></div>
                    <div id="chart_d" style="width: 1000px; height: 500px;"></div>

                </div>
            </div>
        </div>
    </div>

    <script type="text/javascript">
        // 基于准备好的dom，初始化echarts实例
        $(function () {
            var index = 0;
            //年龄
            var arr_name1 = [];
            var arr_name2 = [];
            var arr_name3 = [];
            var arr_name4 = [];
            var arr_value1 = [];
            var arr_value2 = [];
            var arr_value3 = [];
            var arr_value4 = [];

            var loadData = function () {

                var s = layer.load(0, {
                    shade: [0.2, '#fff'] //0.1透明度的白色背景
                });

                $.post("Posthandler.ashx",
                    { "action": "NewTotalKM" },
                    function (data) {
                        if (data.Success == true) {
                            if (data.Data.length > 0) {
                                data.Data.map(function (item, i) {
                                    item.map(function (it) {
                                        switch (it.SecondTypeName) {
                                            case "人":
                                                arr_name1.push(it.Element);
                                                arr_value1.push(it.Accounted.toFixed(2));
                                                break;
                                            case "货":
                                                arr_name2.push(it.Element);
                                                arr_value2.push(it.Accounted.toFixed(2));
                                                break;
                                            case "场":
                                                arr_name3.push(it.Element);
                                                arr_value3.push(it.Accounted.toFixed(2));
                                                break;
                                            case "外部":
                                                arr_name4.push(it.Element);
                                                arr_value4.push(it.Accounted.toFixed(2));
                                                break;
                                            default:
                                                break;
                                        }
                                    });
                                });
                                bindChart("a", "人", '#FCCE10', arr_name1, arr_value1);
                                bindChart("b", "货", '#27727B', arr_name2, arr_value2);
                                bindChart("c", "场", '#FE8463', arr_name3, arr_value3);
                                bindChart("d", "外部", '#9BCA63', arr_name4, arr_value4);
                                layer.close(s);
                            }
                        }
                    });
            }

            function bindChart(name, market, colorname, arryName, arryValue) {
                debugger;
                // var html = "<div id=\"chart_\"+" + name + " style=\"width: 700px; height: 400px;\"></div>";
                var myChart = echarts.init($("#chart_" + name)[0]);
                // 指定图表的配置项和数据
                var option = {
                    title: {
                        text: market
                    },
                    tooltip: {
                        formatter: "{a} <br/> {b}： {c}%"
                    },
                    legend: {
                        //data: ['销量']
                    },
                    xAxis: {
                        axisLabel: {
                            interval: 0,
                            rotate: 20,
                            margin: 3,
                            textStyle: {
                                color: "#222"
                            }
                        },
                        data: arryName
                    },
                    yAxis: {
                        name: "%"
                    },
                    series: [{
                        name: market,
                        type: 'bar',
                        barWidth: 50,//柱图宽度
                        barGap: '0.5%',
                        label: {
                            normal: {
                                show: true,
                                position: 'top'
                            }
                        },
                        itemStyle: {
                            normal: {
                                color: colorname
                            }
                        },
                        data: arryValue
                    }]
                };
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption(option);
                //$('.main').append(html);
            }

            loadData();


        });

    </script>

</body>
</html>
